import HeaderBar from "../../components/header/HeaderBar";

import "./user.css";
import avatar from "../../common/img/avatar.png";
import { useState } from "react";

function UserItem({ subClass = "", icon, title, onClick }) {
  return (
    <li className={`user-list${subClass}`} onClick={onClick}>
      {icon}
      <span className="user-nav-name">{title}</span>
    </li>
  )
}

function UserSetting() {
  const handleClick = (e) => {
    const clearActive = () => {
      document.querySelector(".el-radio-button.male").setAttribute("class", "el-radio-button male")
      document.querySelector(".el-radio-button.female").setAttribute("class", "el-radio-button female")
      document.querySelector(".el-radio-button.secret").setAttribute("class", "el-radio-button secret")
    }
    if (e.target.value == "男") {
      clearActive();
      document.querySelector(".el-radio-button.male").setAttribute("class", "el-radio-button male active")
    } else if (e.target.value == "女") {
      clearActive();
      document.querySelector(".el-radio-button.female").setAttribute("class", "el-radio-button female active")
    } else if (e.target.value == "保密") {
      clearActive();
      document.querySelector(".el-radio-button.secret").setAttribute("class", "el-radio-button secret active")
    }
  }

  return (
    <div className="user-setting-warp">
      <form>
        <div className="el-form-item name">
          <label>昵称：</label>
          <div className="el-form-item-content">
            <input
              autoComplete="off"
              placeholder="你的昵称"
              type="text"
              rows="2" maxLength="16"
              defaultValue="珑琦Ronki"
              validateevent="true"
              className="el-input__inner"
            />
            <span className="nick-name-not">注：修改一次昵称需要消耗6个硬币</span>
          </div>
        </div>
        <div className="el-form-item sign">
          <label>我的签名：</label>
          <div className="el-form-item-content">
            <textarea
              placeholder="设置您的签名- ( ゜- ゜)つロ"
              type="textarea"
              rows="2"
              autoComplete="off"
              validateevent="true"
              className="el-textarea__inner"
              style={{ minHeight: "33px" }}>
            </textarea>
          </div>
        </div>
        <div className="el-form-item sex">
          <label>性别：</label>
          <div className="el-form-item-content">
            <div className="el-radio-group">
              <label className="el-radio-button male active" onClick={handleClick}>
                <input type="radio" className="el-radio-button__orig-radio" value="男" />
                <span className="el-radio-button__inner">男</span>
              </label>
              <label className="el-radio-button female" onClick={handleClick}>
                <input type="radio" className="el-radio-button__orig-radio" value="女" />
                <span className="el-radio-button__inner">女</span>
              </label>
              <label className="el-radio-button secret" onClick={handleClick}>
                <input type="radio" className="el-radio-button__orig-radio" value="保密" />
                <span className="el-radio-button__inner">保密</span>
              </label>
            </div>
          </div>
        </div>
        <div className="el-form-item btn">
          <div className="el-form-item-content">
            <div className="padding-dom"></div>
            <div className="user-my-btn-warp">
              <button type="button" className="el-button el-button--primary">
                <span>保存</span>
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  )
}

function UserHome() {
  return (
    <>
      <div className="user-right-home">
        <div className="index-info">
          <div className="home-head">
            <img src={avatar} alt="" />
          </div>
          <div className="home-right">
            <div className="home-top-msg">
              <span className="home-top-msg-name">珑琦Ronki</span>
            </div>
            <div className="home-top-level">
              <span className="home-to-update">修改资料</span>
            </div>
          </div>
        </div>
      </div>
      <UserSetting />
    </>
  )
}

function User({ loginAction }) {
  const [nav, setNav] = useState("首页");

  const handleClick = (title) => {
    const clearActive = () => {
      document.querySelectorAll(".user-list").forEach((elem) => {
        elem.className = "user-list"
      })
    }
    setNav(title);
    if (title == "首页") {
      clearActive();
      document.querySelectorAll(".user-list")[0].className = "user-list active";
    } else if (title == "我的信息") {
      clearActive();
      document.querySelectorAll(".user-list")[1].className = "user-list active";
    }
  }
  
  return (
    <div className="user">
      <HeaderBar subClass={" fixed-header"} loginAction={loginAction} />
      <div className="top-header">
        <div className="top-img"></div>
      </div>
      <div className="user-content">
        <div className="user-left">
          <span className="user-title">个人中心</span>
          <ul className="user-ul">
            <UserItem subClass={" active"} icon={<i className="iconfont">&#xe75d;</i>} title={"首页"} onClick={() => handleClick("首页")} />
            <UserItem icon={<i className="iconfont">&#xe663;</i>} title={"我的信息"} onClick={() => handleClick("我的信息")} />
          </ul>
        </div>
        <div className="user-right">
          {nav == "首页" ? <UserHome /> : <UserSetting />}
        </div>
      </div>
    </div>
  )
}

export default User;